CodePen

HTML

x
 
1
<body>
2
3
  <header class="page-header">
4
  
5
    <img class="profile-pic" src="http://gathergather.co.nz/grumpy-cat.png">
6
​
7
  <h1 class="page-title">Grumpy Cat</h1>
8
9
  
10
    <p>
11
      Grumpy Cat is an Internet celebrity known for her grumpy facial expression. Her real name is Tardar Sauce. She is awesome!
12
    </p>
13
  </header>
14
  <section class="info-section">
15
    <p>
16
      The Bundesens say that Tardar Sauce's face appears grumpy because the feline has a form of dwarfism. She and her brother Pokey were born to normal parents with "a flat face, bubble eyes, and a short tail". Tardar Sauce is undersized and has hind legs that "are a bit different".
17
    </p>
18
​
19
    <p>
20
      Grumpy Cat appears in Lil Bub & Friendz, a documentary premiered at the Tribeca Film Festival on April 18, 2013 and won the Tribeca Online Festival Best Feature Film. In May 2013, Broken Road Productions optioned Grumpy Cat for a "Garfield-like feature film" adaptation. Producer Todd Garner said "We think we can build a big family comedy around this character."
21
    </p>
22
    </section>
23
  <section class="gallery-section">
24
    <img src="http://www.funnyhub.com/wp-content/uploads/2015/02/Grumpy-Cat.jpg">
25
​
26
    <img src="https://uproxx.files.wordpress.com/2012/12/grumpy-cat-37.jpg">
27
​
28
    <img src="http://media.mnn.com/sites/default/files/editorial/grumpycat.jpg">
29
​
30
    <img src="http://fc06.deviantart.net/fs70/f/2012/328/6/4/grumpy_cat_meme_2_by_jinxxnixx-d5m15cj.jpg">
31
​
32
    <img src="http://snd1.splashpress1.netdna-cdn.com/wp-content/uploads/2013/12/Grumpy-Cat-Walk-Of-Fame.png">
33
​
34
    <img src="http://www.dumpaday.com/wp-content/uploads/2012/11/grumpy-cat-2.jpg">
35
  </section>
36
37
</body>

↑ Insert the most common viewport meta tag

CSS

x
 
1
header,
2
section {
3
  width: 700px;
4
  margin-left: auto;
5
  margin-right: auto;
6
  line-height: 130%;
7
}
8
.profile-pic {
9
  width: 200px;
10
}
11
.page-title {
12
  font-family: "Comic Sans MS";
13
  font-size: 50px;
14
  text-align: center;
15
  text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
16
}
17
.page-header {
18
  color: white;
19
  font-size: 22px;
20
  font-weight: bold;
21
  text-align: center;
22
}
23
.info-section {
24
  background-color: white;
25
  padding: 20px;
26
  margin-top: 30px;
27
  margin-bottom: 30px;
28
}
29
.gallery-section {
30
  text-align: center;
31
}
32
.gallery-section img {
33
  border: 5px solid white;
34
  height: 150px;
35
}
36
 body {
37
  background-image: url(http://subtlepatterns.com/patterns/food.png);
38
  font-family: sans-serif;
39
}
?   ?  
?   ?  
Must be a valid URL.
+ add another resource
via CSS Lint

JS

xxxxxxxxxx
Must be a valid URL.
+ add another resource
via JS Hint
999px
Loading ..................